<template>
  <div class="center-content">
    <!--                /////////////////////////-->
    <!--                个人中心版面-->
    <section class="self-center">
      <!--                    个人中心头部-->
      <div class="self-header">
        <div class="self-basic self-header-text">基本信息</div>
        <div class="self-organization self-header-text">支部信息</div>
      </div>
      <!--                    个人中心主要内容，目前空白-->
      <div class="self-content">

        <!--        新增个人中心主要内容左边部分-->
        <div class="self-content-left">
          <!--          关于头像-->
          <div class="self-image">
            <div class="camera-svg">

            </div>
            <p>修改我的头像</p>

          </div>
        </div>
        <!--        主要内容右边部分-->
        <div class="self-content-right">
          <h2 class="self-info-title">妙蛙狗子</h2>
          <div class="self-info-item">
            <!--            个人信息左边-->
            <div class="self-left-info">
              <ul class="self-info-module">
                <li class="self-info-list">
                  <div class="self-info-sort">性别</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.sex==1?"女":"男"}}</div>
                    <!--                                                <div class="revise-svg">-->
                    <!--                                                </div>-->
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">邮箱</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.email}}</div>
                    <!--                    修改信息图标-->
                    <div class="revise-svg">
                    </div>

                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">电话号码</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.phone}}</div>
                    <div class="revise-svg">
                    </div>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">身份证号码</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">100861008610086</div>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">身份</div>
                  <div class="self-info-detail">
                    <!--                    这里设置了表单样式-->
                    <label for="self-check1">
                      <input type="radio" name="chk" id="self-check1"><span><span></span></span>学生
                    </label>
                    <label for="self-check2">
                      <input type="radio" name="chk" id="self-check2"><span><span></span></span>教师
                    </label>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">学号/工号</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.stCard}}</div>
                    <div class="revise-svg">
                    </div>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">民族</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.nation}}</div>
                    <div class="revise-svg">
                    </div>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">籍贯</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{user.place}}</div>
                    <div class="revise-svg">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="self-right-info">
              <ul class="self-info-module">
                <li class="self-info-list">
                  <div class="self-info-sort">入团时间</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{moment(user.joinYouthTime).format("YYYY-MM-DD")}}</div>
<!--                    <div class="revise-svg">-->
<!--                    </div>-->
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">入党时间</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">{{moment(user.joinPartyTime).format("YYYY-MM-DD")}}</div>
<!--                    <div class="revise-svg">-->
<!--                    </div>-->
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">在读状况</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">本科</div>
                  </div>
                </li>
                <li class="self-info-list">
                  <div class="self-info-sort">所属支部</div>
                  <div class="self-info-detail">
                    <div class="self-info-text">计算机与信息科学学院第一团支部</div>
<!--                    <div class="revise-svg">-->
<!--                    </div>-->
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!--  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
  <!--下面注释掉的html是支部信息部分-->


  <!--  <div class="center-content">-->
  <!--    &lt;!&ndash;                /////////////////////////&ndash;&gt;-->
  <!--    &lt;!&ndash;                个人中心版面&ndash;&gt;-->
  <!--    <section class="self-center">-->
  <!--      &lt;!&ndash;                    个人中心头部&ndash;&gt;-->
  <!--      <div class="self-header">-->
  <!--        <div class=" self-header-text">基本信息</div>-->
  <!--        <div class="self-organization self-basic self-header-text">支部信息</div>-->
  <!--      </div>-->
  <!--      &lt;!&ndash;                    个人中心主要内容，目前空白&ndash;&gt;-->
  <!--      <div class="self-content">-->
  <!--&lt;!&ndash;  支部信息左边内容&ndash;&gt;-->
  <!--        <div class="self-content2-left">-->
  <!--          <ul class="self-info-module">-->
  <!--            <li class="self-info2-list">-->
  <!--              <div class="self-info-sort">支部名称</div>-->
  <!--              <div class="self-info-detail">-->
  <!--                <div class="self-info2-text">计算机与信息科学学院第一团支部</div>-->
  <!--              </div>-->
  <!--            </li>-->
  <!--            <li class="self-info2-list">-->
  <!--              <div class="self-info-sort">支部人员</div>-->
  <!--              <div class="self-info-detail">-->
  <!--                <div class="self-info2-text info2-text-count">总人数<span>33</span>人</div>-->
  <!--              </div>-->
  <!--            </li>-->
  <!--            <li class="self-info2-list">-->
  <!--              <div class="self-info-sort">成员划分</div>-->
  <!--              <div class="self-info-detail">-->
  <!--                <img class="self-people-partition" src="src/assets/images/people-partition.png">-->
  <!--                &lt;!&ndash;                                        <div class="self-info2-text">计算机与信息科学学院第一团支部</div>&ndash;&gt;-->
  <!--              </div>-->
  <!--            </li>-->
  <!--          </ul>-->
  <!--        </div>-->
  <!--&lt;!&ndash;  支部信息右边部分&ndash;&gt;-->
  <!--        <div class="self-content2-right">-->
  <!--          <ul class="self-info-module">-->
  <!--            <li class="self-info2-list2">-->
  <!--              <div class="self-info-role">支部名称</div>-->
  <!--              &lt;!&ndash;                                    <div class="self-info-detail">&ndash;&gt;-->
  <!--              <div class="self-info2-people">是蛙蛙耶</div>-->
  <!--              <div class="self-info2-number">15210000</div>-->
  <!--              &lt;!&ndash;                                    </div>&ndash;&gt;-->
  <!--            </li>-->
  <!--            <li class="self-info2-list2">-->
  <!--              <div class="self-info-role">组织委员</div>-->
  <!--              &lt;!&ndash;                                    <div class="self-info-detail">&ndash;&gt;-->
  <!--              <div class="self-info2-people">是蛙蛙耶</div>-->
  <!--              <div class="self-info2-number">15210000</div>-->
  <!--              &lt;!&ndash;                                    </div>&ndash;&gt;-->
  <!--            </li>-->
  <!--            <li class="self-info2-list2">-->
  <!--              <div class="self-info-role">宣传委员</div>-->
  <!--              &lt;!&ndash;                                    <div class="self-info-detail">&ndash;&gt;-->
  <!--              <div class="self-info2-people">是蛙蛙耶</div>-->
  <!--              <div class="self-info2-number">15210000</div>-->
  <!--              &lt;!&ndash;                                    </div>&ndash;&gt;-->
  <!--            </li>-->
  <!--          </ul>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </section>-->
  <!--  </div>-->


</template>

<script setup>
import {onMounted, ref} from "vue";
import {getCurrentUserInfo} from "../../../api/UserApi.js";
import moment from "moment";

const user = ref({})



onMounted(async () => {
  const res = await getCurrentUserInfo()
  console.log(res.data);
  if (res.code === 200) {
    user.value = res.data
  }
})
</script>

<style scoped>

/*个人中心版面*/
.self-center {
  width: 100%;
  padding-bottom: 1px;
  /*height:100%;*/
}

.self-header {
  height: 5rem;
  padding-top: 8px;
  padding-left: 3.5rem;
  display: flex;
  border-bottom: 1px solid rgba(166, 166, 166, 1);
}

.self-header-text {
  font-size: 14px;
  text-align: center;
  letter-spacing: 3px;
  width: 9rem;
  height: 3.2rem;
  line-height: 3.2rem;
  font-weight: 700;
  cursor: pointer;
}

.self-basic {
  width: 9rem;
  height: 3.2rem;
  line-height: 3.2rem;

  background-color: rgba(156, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 15px;
}

.self-organization {
  margin-left: 5rem;
}

/*新增个人信息主要内容*/
.self-content {
  width: 100rem;
  height: 58rem;
  /*background-color: yellow;*/
  margin: 1.6rem 4rem;
  border-radius: 10px;
  border: 2px solid rgba(156, 0, 0, 1);
  padding: 6rem;
  display: flex;
  letter-spacing: 1px;
}

.self-content-left {

}

.self-image {
  width: 7.5rem;
  height: 7.5rem;
  /*background-color: #747bff;*/
  /*background-image:linear-gradient(to right,rgba(128, 128, 128, 0.4),rgba(128, 128, 128, 0.4)), url("src/assets/images/nav-pic.jpg");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 1rem;
  background-image: linear-gradient(to right, rgba(128, 128, 128, 0.6), rgba(128, 128, 128, 0.6)), url("src/assets/images/nav-pic.jpg");
}

.self-image p {
  font-size: 1rem;
  color: rgba(229, 229, 229, 1);
  text-align: center;
  margin-top: 0.5rem;
}

.camera-svg {
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  background-image: url("src/assets/svg/camera.svg");
  background-size: 3rem 3rem;
  background-position: center;
  background-repeat: no-repeat;
}

.self-content-right {
  /*background-color: #82111f;*/
  padding-top: 2rem;
  flex: 1;
  margin-left: 3rem;
}

.self-info-title {
  font-size: 2.4rem;
  color: rgba(0, 0, 0, 1);
}

.self-info-item {
  margin-top: 3rem;
  display: flex;
}

.self-left-info {
  width: 35rem;
  height: 24rem;
  /*background-color: yellow;*/
}

.self-info-module {

}

.self-info-list, .self-info2-list {
  list-style: none;
  display: flex;
  font-size: 1.6rem;
  line-height: 2.5rem;
}

.self-info-list:not(:first-child) {
  margin-top: 1.5rem;
}

.self-info-sort {

  color: rgba(128, 128, 128, 1);
  width: 9.5rem;
  height: 2.5rem;
  text-align: justify;
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
  /*background-color: #747bff;*/
}

.self-info-detail {
  display: flex;
  margin-left: 3rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.self-right-info {
  width: 42rem;
  height: 24rem;
  margin-left: 2rem;
  /*background-color: green;*/
}

.revise-svg {
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  background-size: 1.5rem 1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 1rem;
  margin-top: 0.25rem;
  background-image: url("src/assets/svg/revise.svg");
}

/*从357到430是设置身份表单样式*/
.self-info-detail label {
  margin-right: 1.5rem;
}

.self-info-detail label {
  display: inline-block;
  width: 10rem;
  /*background-color: #33bb00;*/
  text-align: left;
  line-height: 2.6rem;
  /*padding-bottom: 1rem;*/
}

.self-info-detail label:not(:first-child) {
  margin-left: -4rem;
}

.self-info-detail label input[type="radio"] {
  display: none;
}

.self-info-detail label input[type="radio"] + span {
  box-sizing: border-box;
  display: inline-block;
  width: 17px;
  height: 17px;
  padding: 1px;
  border: 2px solid rgb(128, 0, 0);
  vertical-align: sub;
  /*margin-right: 5px;*/
  border-radius: 50%;
  margin-right: 0.5rem;
  /*border-color:rgb(128,0,0);*/

}

.self-info-detail label input[type="radio"] + span > span {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  /*width: 2rem;*/
  /*height:2rem;*/
  float: left;
  background-color: rgb(128, 0, 0);
  opacity: 0;
  border-radius: 50%;
}

.self-info-detail label input[type="radio"]:checked + span {
  border-color: rgb(128, 0, 0);
  border-radius: 50%;
}

.self-info-detail label:hover input[type="radio"] + span > span {
  opacity: 0.5;
  border-radius: 50%;
}

.self-info-detail label input[type="radio"]:checked + span > span {
  opacity: 1;
  border-radius: 50%;
}

/*注释掉的支部信息*/
/*//////////////////////*/
.self-content2-left {
  width: 42rem;
  height: 45rem;
}

.self-content2-right {
  flex: 1;
}

.self-info2-list:not(:first-child) {
  margin-top: 5rem;
}

.self-info2-text {
  font-weight: 700;
}

.self-info2-text2 {
  font-size: 1.5rem;
  font-weight: 400;
}

.self-info2-list2 {
  display: flex;
  font-size: 1.5rem;
  justify-content: space-around;
}

.self-info2-list2:not(:first-child) {
  margin-top: 2.5rem;
}

.self-info-role {

}

.self-people-partition {
  width: 30rem;
  height: 30rem;
  margin-top: 2rem;
}

/*.content{*/
/*  width: 100px;*/
/*  height: 400px;*/
/*  background-color: #82111f;*/
/*}*/
</style>
